<template>
  <div class="test-container">
    <h2>{{ $t('login.username') }}</h2>
    <h2>price:{{ settingStore.price }}</h2>
    <h2>dobluePrice:{{ settingStore.doublePrice }}</h2>
    <button @click="settingStore.increment">price++</button>
    <h2>{{ $t('message.hello') }}</h2>
    <button @click="changeLang('zh')">切换中文</button>
    <button @click="changeLang('en')">切换English</button>
    <button @click="fetchContent">请求后端接口数据</button>
    <TestCom />
    <h3 class="myh3">{{ add(1000, 400) }}</h3>
    <h3>{{ money }}</h3>
    <button @click="money++">money++</button>
    <hr>
    <h3>{{ count }}</h3>
    <button @click="count++">count++</button>
    <hr>
    <el-tree style="max-width: 600px" :data="result" :props="defaultProps" />
  </div>
  <el-button type="success" @click="coverCate">整体赋值(刷新)</el-button>
</template>

<script setup>

import { ref, shallowRef, watch, watchEffect, toRef } from 'vue'
import add from '@/util/add'
import TestCom from '@/components/TestCom'
import axios from 'axios'
import { useStorage } from '@vueuse/core'

import { useI18n } from 'vue-i18n'
const { locale } = useI18n({ useScope: 'global' })


import { useSettingStoreHook } from './store/module/settings'

const settingStore = useSettingStoreHook()

const changeLang = (lang) => {
  locale.value = lang
  settingStore.changeLang(lang)
}


// console.log(import.meta.env.VITE_API_URL)
// console.log(import.meta.env.MODE)
// let mode = import.meta.env.MODE

const count = ref(0)
const money = ref(100)



const fetchContent = async () => {
  let { data } = await axios.get('/dev-api/content')
  console.log(data)
}

watch(count, (newCount, oldCount) => {
  console.log('count变化了', newCount, oldCount)
})

watchEffect(() => {
  console.log('watchEffect')
  if (count.value === 5) {
    console.log('发送ajax请求')
  }
})

const cates = [
  { cat_id: 1, cate_name: '体育', pid: 0 },
  { cat_id: 2, cate_name: '娱乐', pid: 0 },
  { cat_id: 3, cate_name: '篮球', pid: 1 },
  { cat_id: 4, cate_name: '足球', pid: 1 },
  { cat_id: 5, cate_name: 'NBA', pid: 3 },
  { cat_id: 6, cate_name: 'CBA', pid: 3 },
]

// 无限极分类的函数
function buildTree(cates) {
  // 1.创建一个map字典，分类cat_id作为k,每项作为v,v中加一个children:[]
  const map = {}
  cates.forEach((cate) => {
    map[cate.cat_id] = { ...cate, children: [] }
  })

  // 2. 创建一个数组,存储根节点（pid=0）
  const tree = []
  cates.forEach((cate) => {
    if (cate.pid === 0) {
      // 顶级分类
      tree.push(map[cate.cat_id])
    } else {
      // 非顶级  体育cat_id = 1,    足球 pid = 1
      map[cate.pid].children.push(map[cate.cat_id])
    }
  })

  return tree
}

// 将原始数据，转成特定父子级数据格式
const treeData = buildTree(cates)

const result = shallowRef(treeData)

console.log(result)

const defaultProps = {
  children: 'children',
  label: 'cate_name',
}

const coverCate = () => {
  const newCates = [
    { cat_id: 10, cate_name: '体育1', pid: 0 },
    { cat_id: 20, cate_name: '娱乐1', pid: 0 },
    { cat_id: 30, cate_name: '篮球1', pid: 10 },
    { cat_id: 40, cate_name: '足球1', pid: 10 },
    { cat_id: 50, cate_name: 'NBA1', pid: 30 },
    { cat_id: 60, cate_name: 'CBA1', pid: 30 },
  ]

  result.value = buildTree(newCates)

}

</script>

<style lang="scss" scoped>
.test-container {
  .myh3 {
    background-color: $bgColor;
  }
}
</style>